<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <div class="sitting">
          <div class="left">
            <div>未处理</div>
            <div class="foot">{{ tobeTaskCount }}</div>
          </div>
          <div class="right">
            <el-button @click="dialogFormVisible2 = true">打卡范围</el-button>
            <el-button type="primary" @click="dialogFormVisible = true">设置</el-button>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="seach">
          <div class="left">部门:</div>
          <ul>
            <li v-for="item in departmentList" :key="item.id">
              <el-checkbox v-model="item.checked" :label="item.name" @change="changeDep(item.id)" />
            </li>
          </ul>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="content">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column
              prop="username"
              label="姓名"
              width="180"
            />
            <el-table-column
              prop="workNumber"
              label="工号"
              width="180"
            />
            <el-table-column
              prop="departmentName"
              label="部门"
              width="180"
            />
            <el-table-column
              prop="mobile"
              label="手机"
              width="180"
            />
            <el-table-column
              v-for="(item,index) in table_head"
              :key="item.day"
              :label="convertTitle(item.day)"
              width="100"
            >
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <el-card class="box-card" style="width: 280px;">
                    <div slot="header" class="clearfix">
                      <div style="margin-top: 5px;">{{ scope.row.username +'-'+ scope.row.attendanceRecord[index].day +'-考勤记录' }}</div>
                      <el-tag type="warning">{{ getStaueName(scope.row.attendanceRecord[index].adtStatu) }}</el-tag>

                    </div>
                    <div class="text item">
                      上班打卡时间：{{ scope.row.attendanceRecord[index].adtInTime }}
                    </div>
                    <div class="text item">
                      上班打卡地点：{{ scope.row.attendanceRecord[index].onDutyTime }}
                    </div>
                    <div class="text item">
                      下班打卡时间：{{ scope.row.attendanceRecord[index].adtOutTime }}
                    </div>
                    <div class="text item">
                      下班打卡地点：{{ scope.row.attendanceRecord[index].onDutyTime }}
                    </div>
                  </el-card>

                  <div slot="reference" class="name-wrapper" style="width: 100%;height: 100%;">
                    <!-- <el-tag size="medium"></el-tag> -->
                    <span :class="{red:scope.row.attendanceRecord[index].adtStatu === 2,green:scope.row.attendanceRecord[index].adtStatu===1}" @click="handleClick(scope.row.attendanceRecord[index])">{{ getStaueName(scope.row.attendanceRecord[index].adtStatu) }}</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :page-size="queryParams.pagesize"
            :current-page.sync="queryParams.page"
            :total="queryParams.pageTotal"
            @current-change="changePage"
          />
        </div>
      </el-card>

      <el-dialog title="设置" :visible.sync="dialogFormVisible">
        <attSitting v-if="dialogFormVisible" @closeDialog="closeDialog" />
      </el-dialog>
      <el-dialog title="地图设置" :visible.sync="dialogFormVisible2" :modal="false" fullscreen>
        <amapSitting v-if="dialogFormVisible2" @closeDialog="cloasMapDialog" />
        <!-- <test /> -->
      </el-dialog>
      <el-dialog :visible.sync="dialogFormVisible3">
        <template #title>
          <div style="text-align: center">{{ convertTitle(String(tableItem.day)) }}（实际工作日考勤方案）</div>
        </template>
        <!-- <test /> -->
        <!-- <el-form :model="tableItem" label-width="120px">
          <el-radio-group v-model="tableItem.adtStatu">
            <el-radio v-for="(item) in saveStatuList" :key="Object.keys(item)[0]" :label="Object.keys(item)[0]">{{ item[Object.keys(item)[0]] }}{{ tableItem.adtStatu }}</el-radio>
          </el-radio-group>
        </el-form> -->
        <div style="color: red;margin-bottom: 20px;">注：统计考勤时，异常状态优先正常状态</div>
        <el-radio-group v-model="tableItem.adtStatu">
          <el-radio v-for="(item) in saveStatuList" :key="Object.keys(item)[0]" style="margin-top: 10px;" :label="Number(Object.keys(item)[0])">{{ item[Object.keys(item)[0]] }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="saveStatu">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getDepartment } from '@/api/department'
import { getAttendances, getAdtStatuList, setAttendances } from '@/api/attendance'
import attSitting from './components/attSitting.vue'
import amapSitting from './components/amapSitting.vue'
// import test from './components/test.vue'
export default {
  name: 'Attendance',
  provide() {
    return {
      dlist: this.dlist
    }
  },
  components: {
    attSitting,
    // test
    amapSitting
  },
  data() {
    return {
      dlist: {
        lists: []
      },
      departmentList: [],
      tableData: [],
      table_head: [],
      statuList: [], // 这个是要拿全部做映射的
      queryParams: {

        page: 1,
        pagesize: 10,
        pageTotal: 0,

        deptID: []
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      tobeTaskCount: 0,
      saveStatuList: [], // 这个是在弹框里面保存的
      tableItem: {}
    }
  },
  created() {
    this.getAdtStatuList()
    this.getDepartment()
    this.getUserList()
  },
  methods: {
    async saveStatu() {
      console.log('this.tableItem ', this.tableItem)
      await setAttendances({ userId: this.tableItem.userId, day: this.tableItem.day, adtStatu: this.tableItem.adtStatu, departmentId: this.tableItem.departmentId }, this.tableItem.id)
      this.$message.success('保存成功')
      this.dialogFormVisible3 = false
    },
    handleClick(item) {
      console.log('handleClick', item)
      this.getAdtStatu(item.userId)
      this.tableItem = item//
      this.dialogFormVisible3 = true
    },
    async getDepartment() {
      const res = await getDepartment()
      this.departmentList = res
      this.dlist.lists = res
    },
    async getUserList() {
      const res = await getAttendances({ page: this.queryParams.page, pagesize: this.queryParams.pagesize, deptID: this.queryParams.deptID.join() })
      this.myTest = { test: 'test' }
      this.tableData = res.data.rows
      this.queryParams.pageTotal = res.data.total
      // console.log('res.tobeTaskCount ', res.tobeTaskCount)
      this.tobeTaskCount = res.tobeTaskCount
      // console.log('this.tableData ', this.tableData)
      if (this.queryParams.pageTotal > 0) {
        this.table_head = this.tableData[0].attendanceRecord// 这步是获取表头数据
      }
    },
    async getAdtStatuList() {
      const res = await getAdtStatuList()
      this.statuList = res
      // console.log('getAdtStatuList', res)
    },
    async getAdtStatu(id) {
      const res = await getAdtStatuList({ userId: id })
      console.log('getAdtStatu', res)
      this.saveStatuList = res
      return res
    },
    getStaueName(id) {
      // console.log('getStaueName', id)
      // console.log('getStaueName', this.statuList[0])
      let name = ''
      name = this.statuList.find(item => {
        return Object.keys(item)[0] === String(id)
      })[String(id)]

      // console.log('name', name)
      return name
      // return name
    },
    convertTitle(title) {
      let newTitle = ''
      const oldTitle = []
      oldTitle.push(title.substring(0, 4))
      oldTitle.push(title.substring(4, 6))
      oldTitle.push(title.substring(6, 8))
      const weekDay = ['（日）', '', '', '', '', '', '（六）']
      var myDate = new Date(Date.parse(oldTitle[0] + '-' + oldTitle[1] + '-' + oldTitle[2])) // 例如value:2021-03-10
      // console.log(weekDay[myDate.getDay()]) // 周三
      newTitle = Number(oldTitle[1]) + '/' + Number(oldTitle[2]) + weekDay[myDate.getDay()]
      return newTitle
    },
    changePage(newPage) {
      this.queryParams.page = newPage // 赋值新页码
      this.getUserList() // 查询数据
    },
    changeDep(depId) {
      this.queryParams.page = 1
      // console.log('111', this.deptID.indexOf(depId), depId)
      this.queryParams.deptID.includes(depId) ? this.queryParams.deptID.splice(this.queryParams.deptID.indexOf(depId), 1) : this.queryParams.deptID.push(depId)
      // this.deptID.push(depId)
      this.getUserList()
    },
    closeDialog() {
      this.dialogFormVisible = false
    },
    cloasMapDialog() {
      this.dialogFormVisible2 = false
    }
  }
}
</script>

<style  scoped>
.seach{
  display: flex;
}
.seach .left{
  text-align: right;
  width: 100px;
  padding-top: 30px;
  /* background-color: pink; */
}
ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  text-align: left;
}
ul li{
  margin-top: 12px;
  margin-right: 30px;
}
.app-container{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.box-card:first-child{
  margin-top: 0;
}
.box-card{
  margin-top: 20px;
}

  .sitting{
    display: flex;
    justify-content: space-between;
  }
  .sitting .left .foot{
    margin-top: 10px;
  }

  .red{
    color: red;
  }
  .green{
    color: green;
  }
  .clearfix{
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
  .full-screen-dialog .el-dialog {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  top: 0 !important;
}
</style>
